// var that;
class Tab {
    constructor(id) {
        // that = this
        this.main = document.querySelector(id)
        this.add = this.main.querySelector('.tabadd span')
        this.tabscon = this.main.querySelector('.tabscon')
        this.ul = this.main.querySelector('ul')
        this.init()
    }

    init() {
        this.updata()
        this.add.onclick = this.addTab.bind(this)
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i
            this.lis[i].onclick = this.toggleTab.bind(this.lis[i],this)//this.lis[i]意思是不改变调用bind的函数内的this指向
            this.removerIcon[i].onclick = this.removeTab.bind(this.removerIcon[i],this)//同理不改变调用bind函数内的this指向 但是可以通过参数 去改变调用者内其他this的指向(此时bind里第二个参数this = constructor)
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
        }
    }
    // 如果一个函数内需要本身的this指向 又需要其他的this指向。可以将bind第一个参数设置为:函数本身的this指向 让他函数内的this保持为原函数。
    // 然后需要改变的this用bind传参的方式 把需要的this当做实参 传递给 调用者的形参接收即可

    updata() {
        this.lis = this.main.querySelectorAll('li')
        this.sections = this.main.querySelectorAll('section')
        this.removerIcon = this.main.querySelectorAll('.icon-guanbi')
        this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
    }
    // 1.切换功能 
    toggleTab(that) {//形参接收bind第二个参数 这样下面that=constructor了 这样也就不需要声明全局变量that直接完成了修改this指向 下面的也是同理
        that.clearClass()
        this.className = 'liactive'
        that.sections[this.index].className = 'conactive'
    }

    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = ''
            this.sections[i].className = ''
        }

    }

    // 2.添加功能
    addTab() {
        var random = Math.random(1, 2)
        this.clearClass()
        var li = ' <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>'
        var section = ' <section class="conactive">测试1' + random + '</section>'
        this.ul.insertAdjacentHTML('beforeend', li)
        this.tabscon.insertAdjacentHTML('beforeend', section)
        this.init()
    }
    // // 3.删除功能 
    removeTab(that,e) {//事件对象e必须放到bind参数后面
        e.stopPropagation()
        var index = this.parentNode.index
        that.lis[index].remove()
        that.sections[index].remove()
        if (document.querySelector('.liactive')) return;
        index--
        that.lis[index] && that.lis[index].click()
        that.init()
    }
    // // 4.编辑功能 
    editTab() {
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        var str = this.innerHTML
        this.innerHTML = '<input type="text">'
        var input = this.children[0]
        input.value = str
        input.select()
        input.onblur = function () {
            this.parentNode.innerHTML = this.value
        }
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur()
            }
        }
      
    }
}
new Tab('#tab')